<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    ul {
      padding-left: 24px;
      border-left: 1px dashed #dddddd;
    }

    .box {
      font-size: 14px;
      line-height: 1.5;
      position: relative;
    }

    .box-pointer {
      position: absolute;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      width: 14px;
      left: -14px;
    }

    .box-bracket {
      display: inline-block;
    }
  </style>
</head>
<body style="padding-left: 24px">
<!-- 1. 这是对象的dom模版 -->
<div class="box">
  <span class="box-pointer">+</span>
  <span></span>
  <span class="box-bracket">{</span>
  <ul>
    <li><b>da_ge</b>: 刘备,</li>
    <li><b>er_ge</b>: 关羽,</li>
    <li><b>san_di</b>: 张飞,</li>

    <div class="box">
      <span class="box-pointer">+</span>
      <span><b>shu_guo</b>: </span>
      <span class="box-bracket">{</span>
      <ul style="padding-left: 24px">
        <li><b>zhu_gong</b>: 刘备,</li>
        <li><b>jun_shi</b>: 诸葛亮</li>
      </ul>
      <span class="box-bracket">}</span>
    </div>

  </ul>
  <span class="box-bracket">}</span>
</div>

<br>
<br>

<!-- 2. 这是数组的dom模版 -->
<div class="box">
  <span class="box-pointer">+</span>
  <b></b>
  <span class="box-bracket">[</span>
  <ul style="padding-left: 24px">
    <li>曹操,</li>
    <li>孙权,</li>

    <div class="box">
      <span class="box-pointer">+</span>
      <span><b>刘备</b>: </span>
      <span class="box-bracket">{</span>
      <ul style="padding-left: 24px">
        <li><b>xi_fu</b>: 孙尚香,</li>
        <li><b>age</b>: 19</li>
      </ul>
      <span class="box-bracket">}</span>
    </div>

  </ul>
  <span class="box-bracket">]</span>
</div>
</body>
</html>